<template>
  <div id="lotteryManage">
  	<ul>
  		<li class="imgButton" v-for="(item,key) in allGames" :key="key" :title="item.cn"
  			@click="pushToView(item.cn)"
  			>
  			<img :src="'http://192.168.2.245:3000'+item.icon2"/>
  			<span>{{item.cn}}</span>
  		</li>
  		<li >
  			<div id="addImgButton" @click="showAddNew=true">
  				<i class="el-icon-plus"></i>
  			</div>
				  
  		</li>
  	</ul>
    <add-new-lottery :showAddNew="showAddNew" />
		<transition name="fade">
			<router-view/>
		</transition>
  </div>
</template>

<script>
import AddNewLottery from './AddNewLottery' 
export default{
	components:{AddNewLottery},
	data(){
		return {
			gameList: [],
			showAddNew:false,
		}
	},
	computed:{
     allGames(){
//  	console.log(this.$store.getters.allGames);
        return this.$store.getters.allGames;
    }
    
	},
	//双色球的
	methods: {
			addNewGame(){

			},
			pushToView(cn){
				console.log("hahah");
				this.$router.push({name:cn})
			}
	},
	created(){
			this.$store.dispatch('loadAllGame',{api:this.$apis.findAllGames})
		}
}
</script>

<style lang="scss" scoped>
.fade-enter-active,.fade-leave-active {
		transition: all 0.9s;
}
.fade-enter,.fade-leave-to {
	opacity: 0;
}
#lotteryManage{
	padding: 7px;
	padding-left: 18px;
	width: 100%;
	ul{
		list-style: none;
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		.imgButton{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100px;
			height: 100px;
			margin-right: 20px;
			margin-bottom:20px;
			img{
				/*width: 80px;*/
			};
		};
		#addImgButton{
					width:90px;
					height:90px;
					border:1px dashed gray;
					line-height: 90px;
					font-size: 28px;
		};
	};
}
</style>